/* banner部分 */
.banner{
    width: 100%;
    height: 900px;
    border: 1px solid #000;
    background: url(../img/100c0m000000dfpw51C31.jpg) no-repeat;
    /* background-color: white; */
    background-size: cover;
}

/* 导航栏 */
.nav{
    z-index: 99;
    position: fixed;
    width: 100%;
    height: 100px;
    /* border: 1px solid #000; */
    background: white;
    padding: 0 200px 0 200px;
}

.nav ul li{
    line-height: 100px;
}

.nav ul li a::after{
    content: "";
    position: relative;
    left: 0px;
    display: block;
    width: 100%;
    height: 2px;
    background: #000;
    bottom: 30px;
    border-radius: 5px;
    transform: translateY(10px);
    opacity: 0;
    transition: .5s ease;
}

.nav ul li a:hover::after{
    transform: translateY(0);
    opacity: 1;
}


.left{
    float: left;
    width: 100px;
    height: 100px;
    /* border: 1px solid #000; */
}

.left img{
    width: 100px;
    height: 100px;
}

.right{
    float: right;
    margin-right: 100px;
}

.right a{
    color: black;
    font-size: 22px;
    font-weight: 800;
}

/* 导航栏 end*/

.banner h1{
    color: white;
    position: relative;
    top: 279px;
    left: 351px;
    font-size: 90px;
}

.banner h3 a{
    display: block;
    width: 140px;
    height: 50px;
    text-align: center;
    background: transparent;
    border: 2px solid white;
    color: white;
    border-radius: 35px;
    padding: 5px 10px 5px 10px;
    position: relative;
    top: 319px;
    left: 751px;
    font-size: 28px;
    font-weight: bold;
    overflow: hidden;
    z-index: 1;
    transition: all 1s;
}

.banner h3 a::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: white;
    position: absolute;
    top: 0;
    left: 0;
    transform: skewX(45deg);
    z-index: -1;
}

.banner h3 a::before{
    width: 0%;
    transition: all 1s;
    /* z-index: -1; */
    left: -30px;
}

.banner h3 a:hover::before{
    width: 150%;
}

.banner h3 a:hover{
    color: #1f35ff;
    border: 2px solid 1f35ff;
}
/* banner部分end */

/* box部分 */
.box{
    width: 100%;
    height: 700px;
    background-color: white;
    padding: 200px 100px 0 100px;
}

.box hr{
    border: none;
    border-top: 3px solid black;
}

.box h2{
    color: #5667ff;
    position: relative;
    top: -40px;
    left: 525px;
    width: 400px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background-color: white;
    font-size: 40px;
    /* letter-spacing: 20px; */
    padding-left: 8px;
}

.box .bt1{
    font-size: 22px;
    position: relative;
    top: -40px;
    left: 525px;
}

.box div{
    width: 80%;
    height: 30px;
    margin: 0 auto;
}

.box div p{
    margin: 10px 0 10px 0;
}

.box div .wz1{
    /* background-color: aqua; */
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}

.box div .wz2{
    /* background-color: aqua; */
    text-align: center;
    font-size: 20px;
}

/* 介绍 */
.box1{
    width: 100%;
    height: 700px;
    background-color: white;
    padding: 100px 100px 0 100px;
}

.box1 h2{
    color: #5667ff;
    position: relative;
    top: -40px;
    left: 253px;
    width: 900px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background-color: white;
    font-size: 35px;
    /* letter-spacing: 20px; */
    padding-left: 8px;
}

.box1 .tp1 div{
    width: 100%;
    height: 300px;
}

.box1 .tp1 div{
    float: left;
    margin: 0 20px 20px 20px;
    border-radius: 30px;
    width: 30%;
    height: 300px;
    /* margin: 0 auto; */
    background-color: #5667ff;
    /* background: url(); */
}

.box1 .tp1 div span{
    position: relative;
    top: -180px;
    left: 134px;
    font-size: 35px;
    font-weight: 800;
    color: white;
    border: 2px solid white;
    border-radius: 30px;
    padding: 5px 10px 5px 10px;
}

/* 图片的鼠标移动效果 */
.box1 .tp1 div span:hover{
    color: #5667ff;
    border: 2px solid #5667ff;
}

.box1 .tp1 div img{
    width: 100%;
    height: 300px;
    border-radius: 30px;
}

/* 介绍二 */
.box2{
    margin-top: 200px;
    width: 100%;
    height: 700px;
    background-color: white;
    padding: 100px 100px 0 100px;
}

.box2 h2{
    color: #5667ff;
    position: relative;
    top: -40px;
    left: 253px;
    width: 900px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background-color: white;
    font-size: 35px;
    /* letter-spacing: 20px; */
    padding-left: 8px;
}

.tp2 .tp2-tp{
    position: relative;
    top: 0;
    float: left;
    margin: 0 20px 20px 24px;
    border-radius: 30px;
    width: 21%;
    height: 350px;
    background-color: #f5f5f5;
    box-shadow: 0px 5px 13px 1px #bebebe;
    transition: all 0.3s ease 0s;
}


.tp2 .tp2-tp1{
    width: 100%;
    height: 60%;
    background-color: aquamarine;
    background: url(../img/xhtb.jpg) no-repeat;
    background-size: cover;
    background-position: -10px;
}

.tp2 .tp2-tp2{
    width: 100%;
    height: 60%;
    background-color: aquamarine;
    background: url(../img/hqsb.png) no-repeat;
    background-size: cover;
    /* background-position: -20px; */
}

.tp2 .tp2-tp3{
    width: 100%;
    height: 60%;
    background-color: aquamarine;
    background: url(../img/tzgs.jpg) no-repeat;
    background-size: cover;
    background-position: 0 -100px;
}

.tp2 .tp2-tp4{
    width: 100%;
    height: 60%;
    background-color: aquamarine;
    background: url(../img/zrp.jpg) no-repeat;
    background-size: cover;
    background-position: 0px;
}

.tp2-tp h3{
    font-size: 24px;
    margin: 15px 0 0 15px;
    /* text-align: center; */
}

.tp2-tp p{
    margin: 9px 0 5px 0;
}

.tp2-tp:hover{
    position: relative;
    top: -20px;
}
/* 介绍二end */
.box3{
    width: 100%;
    height: 700px;
    background-color: white;
    padding: 100px 100px 0 100px;
}

.box3 h2{
    color: #5667ff;
    position: relative;
    top: -40px;
    left: 253px;
    width: 900px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background-color: white;
    font-size: 35px;
    /* letter-spacing: 20px; */
    padding-left: 8px;
}

.box3 .tp3{
    float: left;
    width: 30%;
    height: 300px;
    background-color: green;
    margin-left: 20px;
}

.box3 .tp3 img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tp3-wz{
    position: relative;
    top:-84px;
    width: 100%;
    height: 80px;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    transition: all 0.5s ease 0s;
}

.tp3-wz h3{
    padding: 10px 0 0 10px;
    font-size: 24px;
    color: white;
}

.tp3-wz p{
    color: white;
}

.tp3-box{
    margin-bottom: 14.5px;
}

.tp3-wz:hover{
    position: relative;
    top: -304px;
    height: 300px;
    transition: all 0.5s ease 0s;
}

/* 介绍三end */

/* footer部分 */
.footer{
    width: 100%;
    height: 200px;
    padding-top: 65px;
    background-color: #333333;
}

.footer .db_bottom{
    color: white;
    text-align: center;
    margin-top: 15px;
}